<template>
    <div id="app" class="wrapper">
      <img class="wrapper__img" src="./images/user.png" alt="user">
      <div class="wrapper__input">
        <input v-model="userName" class="wrapper__input__content" type="text" placeholder="请输入用户名">
      </div>
      <div class="wrapper__input">
        <input v-model="password" class="wrapper__input__content" type="password" placeholder="输入密码">
      </div>
      <div class="wrapper__loginButton" @click="Login">登陆</div>
      <div class="wrapper__register">
        <span>立即注册</span>
        <div class="seperator"></div>
        <span>忘记密码</span>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        userName: '',
        password: ''
      };
    },
    methods: {
      Login() {
        console.log(this.userName, this.password);
        if (this.userName.length > 0 && this.password.length > 0) {
          alert(`用户名: ${this.userName} 密码: ${this.password}`);
        } else {
          alert("请输入用户名和密码");
        }
      }
    }
  };
  </script>
  
  <style scoped>

  </style>
  